---
id: select
title: Select
sidebar_label: Select
---

Select is a form component that provides a dropdown menu for users to choose from among several options. It supports single and multiple selections, customizable styles, and integration with form libraries.

## Usage

To use the `Select` component in your web application, start by importing it along with `SelectItem` for individual
options and `SelectGroup` if you need to group related options together. The `Select` component can be highly
customized to fit your specific user interface requirements. This allows you to control its appearance, such as its
size, shape, and color, to match the overall design of your application. Additionally, you can modify its behavior,
including how it handles user interactions, whether it supports multiple selections, and how it displays selected items.
This level of customization makes it a versatile tool for creating intuitive and responsive dropdown menus
that improve user experience.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Select

A basic usage of the select component with minimal configuration.

import SelectBasicDemo from '../../samples/components/select/select_basic';
import SelectBasicSource from '!!raw-loader!../../samples/components/select/select_basic';

<CodeSample>
    <SelectBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{SelectBasicSource}</CodeBlock>

## Customized Select

A select component with custom styles and functionalities.

import SelectCustomDemo from '../../samples/components/select/select_custom';
import SelectCustomSource from '!!raw-loader!../../samples/components/select/select_custom';

<CodeSample>
    <SelectCustomDemo/>
</CodeSample>

<CodeBlock language="tsx">{SelectCustomSource}</CodeBlock>

## Select with Groups

Demonstrates how to group options under labels using `SelectGroup`.

import SelectGroupDemo from '../../samples/components/select/select_group';
import SelectGroupSource from '!!raw-loader!../../samples/components/select/select_group';

<CodeSample>
    <SelectGroupDemo/>
</CodeSample>

<CodeBlock language="tsx">{SelectGroupSource}</CodeBlock>

## Select Component Props

The `Select` component in FireCMS UI is highly customizable through various props. Below is a comprehensive list of props you can use to tailor the `Select` component to your needs:

- `open`: Controls whether the select dropdown is open. Defaults to `false`.
- `name`: The name attribute for the select input element.
- `id`: The id attribute for the select input element.
- `onOpenChange`: Callback when the open state changes.
- `value`: The current value(s) of the select component, which can be a `string` or an array of `strings` for multiple selections.
- `className`: Additional classes to apply to the root element.
- `inputClassName`: Additional classes to apply to the input element.
- `onChange`: Handler function called when the select value changes.
- `onValueChange`: Callback when the value changes.
- `onMultiValueChange`: Callback when the value changes in a multiple select.
- `placeholder`: The placeholder text displayed when no value is selected.
- `renderValue`: Custom render function for the selected value.
- `renderValues`: Custom render function for the selected values in multiple select.
- `size`: The size of the select component, can be `"small"` or `"medium"`. Defaults to `"medium"`.
- `label`: The label displayed above the select field, can be a `ReactNode` or a `string`.
- `disabled`: Disables the select component. Defaults to `false`.
- `error`: Sets the select component in an error state. Defaults to `false`.
- `position`: Position of the dropdown relative to the trigger, can be `"item-aligned"` or `"popper"`. Defaults to `"item-aligned"`.
- `endAdornment`: Element to be placed at the end of the select input.
- `multiple`: Enables multiple selection mode. Defaults to `false`.
- `inputRef`: Ref object for the select input element.
- `padding`: Adds padding to the select input. Defaults to `true`.
- `invisible`: Hides the select component but keeps it in the DOM.
- `children`: Content to be rendered as the options within the select component.

